<template>
  <view class="goods-list">
    <!-- 1.1 搜索框 开始 -->
    <YgSearch></YgSearch>
    <!-- 1.1 搜索框 结束 -->

    <!-- 2.1tab 开始 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      active-color="#eb4450"
      @change="change"
    ></u-tabs>
    <!-- 2.1tab 结束 -->

    <!-- 3.1tab 商品列表开始 -->
    <view class="goods-content" v-if="current === 0">
      <navigator
        class="goods-item u-flex u-margin-bottom-10"
        v-for="(item, index) in goods"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=` + item.goods_id"
      >
        <view class="goods-img u-flex-1">
          <u-image
            width="80%"
            :src="item.goods_small_logo"
            mode="widthFix"
          ></u-image>
        </view>

        <view class="goods-info u-flex-2">
          <view class="good-name u-list-2"
            >{{ index }} {{ item.goods_name }}
          </view>
          <view class="good-price"> ￥{{ item.goods_price }} </view>
        </view>
      </navigator>
    </view>

    <view class="goods-content" v-if="current === 1">
      销量内容
    </view>
    <view class="goods-content" v-if="current === 2">
      价格内容
    </view>
    <!-- 3.1tab 商品列表结束 -->
  </view>
</template>

<script>
const params = {
  query: "",
  //否	string	关键字
  cid: "",
  //否	string	分类id
  pagenum: 1,
  //否	number	页码
  pagesize: 10,
  //否	number	页容量
};
let totalPages = 1; // 全局变量 总条数 || 总页数
export default {
  data() {
    return {
      list: [
        {
          name: "待收货",
        },
        {
          name: "待付款",
        },
        {
          name: "待评价",
          count: 0,
        },
      ],
      current: 0,
      goods: [],
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
    async getGoods(callback) {
      const res = await this.$u.get("/goods/search", params);
      // 分页 数组 叠加（新旧的数组拼接在一起  数组合并 ）
      this.goods = [...this.goods, ...res.message.goods];
      // 获取总条数  计算总页数
      totalPages = Math.ceil(res.message.total / params.pagesize);
      console.log("请求回来");
      callback && callback();
    },
  },
  async onLoad(option) {
    const { id } = option;
    console.log(id);
    // const id = 187;
    params.cid = id;
    this.getGoods();
  },
  onReachBottom() {
    if (params.pagenum >= totalPages) {
      // 没有下一页了
      uni.showToast({
        title: "没有更多数据",
        icon: "none", // 不写none 默认值 success 打钩
      });
    } else {
      // 页面递增
      params.pagenum++;
      this.getGoods(); // 重新发送请求 它内部已经调用 params 全局变量了
    }
  },
  onPullDownRefresh() {
    this.goods = [];
    params.pagenum = 1;
    this.getGoods(function() {
      console.log("关闭下拉窗口");
      uni.stopPullDownRefresh();
    });
  },
};
</script>

<style lang="scss">
.goods-item {
  // 设置子项拉伸到父项的高度
  align-items: stretch;

  border-bottom: 1rpx solid #eee;
}
.goods-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .goods-price {
    color: $themeColor;
  }
}
</style>
